<template>
<view class="container">
	<!-- Tab -->
	<view class="tab-view">
		<view class="tab-view-item"
			id="1"
			:data-current="1"
			:class="{ 'active': active == 'faq' }"
			@click="onTabClick('faq')">
			<text class="tab-view-item--text">求解答</text>
		</view>
		<view class="tab-view-item"
			id="0"
			:data-current="0"
			:class="{ 'active': active == 'base' }"
			@click="onTabClick('base')">
			<text class="tab-view-item--text">圈子</text>
		</view>
		<view class="tab-view-item"
			@click="onItemClick('base', 'profile', { id: 1 })">
			<text class="tab-view-item--text">我的</text>
		</view>
	</view>
	<!-- 主体 -->
	<swiper :current="tabIndex"
		class="swiper-box"
		style="flex: 1;"
		:duration="300"
		@change="onSwiperChange">
		<!-- 求解答 -->
		<swiper-item style="overflow-y: auto;">
			<view class="task-list detail-white"
				@click="onRank">
				<view class="task-item border">
					<view class="task-item-content">
						<text class="iconfont icon-list"></text>
						<text class="sec-left">No.1 {{ rankList[0] && rankList[0].name }}回答了{{ rankList[0] && rankList[0].count }}个问题</text>
					</view>
					<view class="task-item-action">
						<text>排行榜</text>
					</view>
				</view>
			</view>
			
			<uni-list :border="false">
				<faq-card v-for="item in faqList"
					:key="item.id"
					:item="item"
					@on-item="(type) => onItemClick('faq', type, item)">
				</faq-card>
			</uni-list>
			<view v-show="showText" class="empty-text sec-top">{{ text }}</view>
		</swiper-item>
		<!-- 圈子 -->
		<swiper-item style="overflow-y: auto;">
			<uni-list :border="false">
				<base-card v-for="item in baseList"
					:key="item.id"
					:item="item"
					@on-item="(type) => onItemClick('base', type, item)">
				</base-card>
			</uni-list>
			<view v-show="bShowText" class="empty-text sec-top">{{ bText }}</view>
		</swiper-item>
	</swiper>
</view>
</template>

<script>
import { getMyClassInfo, postBaseList, postFaqRank } from '@/api/index.js';
import FaqCard from './faq-card.vue';
import BaseCard from './base-card.vue';
export default {
	components: {
		FaqCard,
		BaseCard
	},
	data() {
		return {
			active: 'base',
			tabIndex: 1,
			tabs: ['faq', 'base'],
			classId: null,
			faqList: [],
			offset: 0,
			limit: 20,
			showText: false,
			text: '加载中...',
			noMore: false,
			baseList: [],
			bOffset: 0,
			bLimit: 20,
			bShowText: false,
			bText: '加载中...',
			bNoMore: false,
			rankList: []
		}
	},
	onShow() {
		const token = uni.getStorageSync('X-Auth-Token');
		if (!token) {
			uni.navigateTo({
				url: '/pages/login/login'
			});
		}
		this.reset();
		this.resetBase();
		getMyClassInfo().then(res => {
			let id = res.data && res.data.id;
			this.classId = id;
			this.getFaqList(this.offset, this.limit);
			this.getBaseList(this.bOffset, this.bLimit);
			postFaqRank({
				classroomId: this.classId,
				type: 'question'
			}).then(res => {
				this.rankList = res.list || [];
			})
		});
	},
	methods: {
		onRank() {
			uni.navigateTo({
				url: '/pages/profile/rank'
			})
		},
		getFaqList(offset, limit) {
			this.showText = true;
			postBaseList({
				pageNum: offset,
				pageSize: limit,
				classRoomId: this.id,
				type: 'question',
				isShowPosts: 1
			}).then(res => {
				let total = res.total || 0;
				if (total <= (offset + 1) * limit) {
					this.noMore = true;
					this.text = '已经到底啦～';
				}
				this.faqList = this.faqList.concat(res.list || []);
			});
		},
		getBaseList(offset, limit) {
			this.bShowText = true;
			postBaseList({
				pageNum: offset,
				pageSize: limit,
				classRoomId: this.id,
				type: 'discussion',
				isShowPosts: 0
			}).then(res => {
				let total = res.total || 0;
				if (total <= (offset + 1) * limit) {
					this.bNoMore = true;
					this.bText = '已经到底啦～';
				}
				this.baseList = this.baseList.concat(res.list || []);
			});
		},
		reset() {
			this.faqList = [];
			this.offset = 0;
			this.limit = 20;
			this.noMore = false;
			this.showText = false;
			this.text = '加载中...';
		},
		resetBase() {
			this.baseList = [];
			this.bOffset = 0;
			this.bLimit = 20;
			this.bNoMore = false;
			this.bShowText = false;
			this.bText = '加载中...';
		},
		onItemClick(module, type, item) {
			switch(type) {
				case 'forward':
					break;
				case 'comment':
					break;
				case 'collect':
					break;
				case 'help':
					break;
				default:
					uni.navigateTo({
						url: `/pages/${ module }/${ type }?id=${ item.id }&from=base`
					});
					break;
			}
		},
		onTabClick(type) {
			this.active = type
			switch(type) {
				case 'faq':
					this.tabIndex = 0;
					break;
				default:
					this.tabIndex = 1;
					break;
			}
		},
		onSwiperChange(e) {
			const index = e.target.current || e.detail.current;
			this.tabIndex = index;
			this.active = this.tabs[index];
		}
	},
	// 下拉刷新
	onReachBottom() {
		if (this.active == 'faq') {
			if (!this.noMore) {
				this.offset = this.offset + 1;
				this.getFaqList(this.offset, this.limit);
			}
		}
		else {
			if (!this.bNoMore) {
				this.bOffset = this.bOffset + 1;
				this.getBaseList(this.bOffset, this.bLimit);
			}
		}
	},
	onNavigationBarButtonTap(button) {
		if (button.index == 0) {	// 搜索
			uni.navigateTo({
				url: '/pages/subject/result?from=base'
			})
		}
	}
}
</script>
